<script setup lang="ts">
import {router} from "@/router";
import {projectPage} from "@/pages/project/projectManagement/index.js";
import {useUserStore} from "@/pinia/stores/user.ts";
const userData = useUserStore().userInfo;

const projects = ref([])
const handleClick =()=> {
  router.push('/projectAccount/management');
}
const getProjectData = async () => {
  let response = await projectPage({teacherId: userData.id}, 9, 1);
  projects.value = response.data.records;
}
onMounted(() => {
  getProjectData();
})
const toHandleClick = (data) => {
  ElMessage.success({
    showClose: true,
    message: '正在跳转到 '+data.title+' 页面',
    duration: 999,
  });
  // 两秒之后跳转到详情页面
  setTimeout(() => {
    router.push({
      path: "/detail",
      query: data
    })
    }, 1000);
}
</script>

<template>
  <el-card :body-style="{ padding: '0px' }" style="width: 100%">
    <template #header>
      <div class="card-header">
        <span>进行中的项目</span>
        <el-button type="primary" @click="handleClick" text>全部项目</el-button>
      </div>
    </template>
    <el-row style="width: 100%;">
      <el-empty style="margin: 0 auto" v-if="projects.length===0" description="你还没有创建项目哦">
        <el-button text type="success" @click="handleClick">去创建</el-button>
      </el-empty>
      <el-col v-else :span="8" v-for="(item, index) in projects" :key="index">
        <el-card shadow="hover" class="project-card" @click="toHandleClick(item)">
          <div class="avatar">
            <el-avatar :size="40" :src="item.projectImg"/>
            <span class="project-name">{{ item.title }}</span>
          </div>
          <div class="project-info">
            <p class="description">{{ item.content }}</p>
            <div class="meta">
              <div class="meta-item">{{ item.protype }}</div>
              <div class="meta-item">{{ item.createTime.slice(0, 10) }}</div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </el-card>
</template>

<style scoped lang="scss">
.el-button:hover {
  background: none !important; // 移除背景颜色
  border-color: initial !important; // 移除边框颜色
  box-shadow: none !important; // 移除阴影效果
}

.card-header {
  display: flex;
  justify-content: space-between;
}

.el-row {
  display: flex;
  flex-wrap: wrap;
}


.project-card {
  display: flex;
  width: 100%;
  height: 100%;
  flex-direction: column;
  align-items: last;
  border-radius: 0;
}

.avatar {
  display: flex;
  margin-bottom: 8px;
}


.project-name {
  font-size: 18px;
  font-weight: bold;
  margin-top: 12px;
  margin-left: 15px;
}

.description {
  color: #666;
  text-align: left;
  margin-bottom: 8px;
  height: 50px;
}
.meta {
  display: flex;
  justify-content: space-between;
}
.meta-item {
  font-size: 12px;
  color: #999;
}
</style>
